<div class="gh-flow">
    <div class="gh-flow-content-wrap">
        <section class="gh-flow-content">
            <form id="login" method="post" class="gh-signin" novalidate="novalidate" {{action "authenticate" on="submit"}}>
                {{#gh-form-group errors=signin.errors hasValidated=hasValidated property="identification"}}
                    <span class="gh-input-icon gh-icon-mail">
                        {{svg-jar "email"}}
                        {{gh-trim-focus-input
                            class="email"
                            type="email"
                            placeholder="Email Address"
                            name="identification"
                            autocapitalize="off"
                            autocorrect="off"
                            autocomplete="username"
                            tabindex="1"
                            value=(readonly signin.identification)
                            input=(action (mut signin.identification) value="target.value")
                            focus-out=(action "validate" "identification")
                        }}
                    </span>
                {{/gh-form-group}}
                {{#gh-form-group errors=signin.errors hasValidated=hasValidated property="password"}}
                    <span class="gh-input-icon gh-icon-lock forgotten-wrap">
                        {{svg-jar "lock"}}
                        {{gh-text-input
                            class="password"
                            type="password"
                            placeholder="Password"
                            name="password"
                            tabindex="2"
                            autocomplete="current-password"
                            autocorrect="off"
                            value=(readonly signin.password)
                            input=(action (mut signin.password) value="target.value")}}

                        {{#gh-task-button
                            task=forgotten
                            class="forgotten-link gh-btn gh-btn-link gh-btn-icon"
                            tabindex="4"
                            type="button"
                            successClass=""
                            failureClass=""
                            as |task|
                        }}
                            <span>{{#if task.isRunning}}{{svg-jar "spinner" class="gh-spinner"}}{{else}}Forgot?{{/if}}</span>
                        {{/gh-task-button}}
                    </span>
                {{/gh-form-group}}

                {{gh-task-button "Sign in"
                    task=validateAndAuthenticate
                    class="login gh-btn gh-btn-blue gh-btn-block gh-btn-icon"
                    type="submit"
                    tabindex="3"}}
            </form>

            <p class="main-error">{{if flowErrors flowErrors}}&nbsp;</p>
        </section>
    </div>
</div>
